<template>
    <div>
      <FormulaItem
        v-for="(item, idx) in this.prop.formulaItems"
        :key="idx" :item="item"
        :idx="idx"
        @add="addItem"
        @delete="deleteItem" />
    </div>
</template>

<script>
  import FormulaItem from "./FormulaItem";

  export default {
    components: {FormulaItem},
    props:['prop'],
    data(){
      return{
      }
    },
    methods:{
      addItem() {
        let item = {}
        let ids = 'abcdefghijklmnopqrstuvwxyz'
        for (let item of this.prop.formulaItems){
          ids = ids.replace(item.item_id, '')
        }
        if(!ids){
          this.$message.warning("列项过多")
          return
        }
        item.item_id = ids[0]
        this.prop.formulaItems.push(item)
      },
      deleteItem(idx) {
        this.prop.formulaItems.splice(idx, 1)
      },
    },
    created() {
      if(!this.prop.formulaItems || this.prop.formulaItems.length == 0){
        this.$set(this.prop,'formulaItems',[{item_id: 'a'}]);
      }
    }
  }
</script>

<style scoped>

</style>
